<!DOCTYPE html>
<html lang="cn" window-frame="solid-with-shadow" window-icon="../images/icon/icon.ico">
<head>
    <meta charset="UTF-8">
    <title>BS Redis Desktop Client</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        @import "../css/define.css";
        .body{
            position: absolute;
            left: 0;
            top: 30px;
            right: 0;
            bottom: 0;
            overflow: @scroll;
            background: #fff;
        }
        pre {
            padding: 5px;
            margin: 5px;
            line-height: 24px;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: darkred;
        }
    </style>
</head>
<body>
<div styleset="#title-bar" role="window-caption">
    <div class="title-bar-title">
        <img class="app-icon" src="/images/icon/app.png" height="16px"/>
        <span class="app-name">详情</span>
    </div>
    <div class="title-bar-action">
        <button class="btn exit" id="exit"></button>
    </div>
</div>
<div class="body">
    <pre id="renderer"></pre>
</div>
<script type="module">
    import tools from "../js/tools"

    document.on("click", "#exit", evt => {
        tools.windowClose()
    })

    /**
     * 高亮显示json
     * @param json {string} json string
     * @returns {string} html string
     */
    const syntaxHighlight = (json) => {
        json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = "number"
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "key"
                } else {
                    cls = "string"
                }
            } else if (/true|false/.test(match)) {
                cls = "boolean"
            } else if (/null/.test(match)) {
                cls = "null"
            }
            return "<span class=\"" + cls + "\">" + match + "</span>"
        })
    }
    /**
     * 渲染基本信息
     */
    const renderDatabaseInfo = () => {
        setTimeout(() => {
            document.$("#renderer")
                .innerHTML = syntaxHighlight(JSON.stringify(tools.getParameters().data, null, 4))
        }, 10)
    }
    renderDatabaseInfo()
</script>
</body>
</html>